import {memo, ReactNode, useEffect, useState} from "react";
import {Col, Drawer, Form, Image, Row, Table, TableProps} from "antd";
import {StudentType} from "../../../../graphql/student";
import FormStyle from "./style.ts";
import {shallowEqual, useSelector} from "react-redux";
import {RootState} from "../../../../store";
import {useGetOrdersByUserAndOrg} from "../../../../service/student";
import {OrderType} from "../../../../types/order";
import dayjs from "dayjs";

const StudentDrawer = memo((props: {
    drawerOpen: boolean,
    setDrawerOpen: (open: boolean) => void,
    studentData: StudentType
}) => {
    const {org} = useSelector(
        (state: RootState) => ({
            org: state.orgReducer.currentOrg,
        }),
        shallowEqual
    );
    const {drawerOpen, setDrawerOpen, studentData} = props;
    const [studentOrders, setStudentOrders] = useState<OrderType[]>([]);
    const [form] = Form.useForm();
    const {data} = useGetOrdersByUserAndOrg(studentData.id);

    useEffect(() => {
        if(data) {
            setStudentOrders(data)
        }
    }, [studentData, org.id, data]);
    const orderMap: Partial<Record<keyof OrderType, {
        name: string,
        render: null | ((arg: any) => ReactNode)
    }>> = {
        productLogo: {
            name: "商品封面",
            render: (logo: string) => <Image src={logo}/>
        },
        productName: {
            name: "商品名称",
            render: null
        },
        buyPrice: {
            name: "购买价格",
            render: null
        },
        buyNum: {
            name: "购买数量",
            render: null
        },
        buyTime: {
            name: "购买时间",
            render: (time) => dayjs(Number(time)).format('YYYY-MM-DD HH:mm:ss'),
        },
        tel: {
            name: "购买手机号",
            render: null
        },
        orderCode: {
            name: "订单号",
            render: null
        }
    }
    const ordersColumns: TableProps<OrderType>['columns'] = (Object.keys(orderMap) as (keyof OrderType)[]).map(item => {
        const column = orderMap[item];
        if (!column) return {}
        const res = {
            title: column.name,
            dataIndex: item,
            key: item
        }
        if (column.render) {
            return Object.assign(res, {render: column.render})
        }
        return res
    })
    return (
        <Drawer
            onClose={() => {
                setDrawerOpen(false);
                form.resetFields([]);
            }}
            open={drawerOpen}
            title={studentData.name ?? `淡云教育用户${studentData.id}`}
            width="60vw"
            forceRender
        >
            <FormStyle>
                <Form form={form} layout="vertical" scrollToFirstError preserve={false} initialValues={studentData}>
                    <Row className="row" gutter={20}>
                        <Col span={12}>
                            <Form.Item
                                style={{width: "100%"}}
                                label="头像"
                                shouldUpdate
                            >
                                <img src={studentData.avatar ?? "https://danyun.oss-cn-chengdu.aliyuncs.com/brand.png"}
                                     alt="封面"/>
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label="简介">
                                <div className="desc">
                                    {studentData.desc ?? "暂无"}
                                </div>
                            </Form.Item>
                            <Form.Item label="手机号">
                                <div className="tel">
                                    {studentData.tel ?? "暂无"}
                                </div>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={20}>
                        <Form.Item label="在该门店的订单">
                            <Table
                                pagination={false}
                                columns={ordersColumns}
                                dataSource={studentOrders.map(item => ({...item, key: item.id}))}/>
                        </Form.Item>
                    </Row>
                </Form>
            </FormStyle>
        </Drawer>
    );
});

export default StudentDrawer;
